<template>
  <aside 
    id="sidebar" 
    class="bg-white/95 backdrop-blur-md shadow-2xl fixed h-full z-40 transition-all duration-300 border-r border-white/30"
    :class="expanded ? 'sidebar-expanded' : 'sidebar-collapsed'"
  >
    <!-- 搜索区域（固定） -->
    <div class="p-3 border-b border-gray-200/50 bg-white/90 backdrop-blur-sm sticky top-0 z-10">
      <div class="relative">
        <input 
          type="text" 
          placeholder="搜索题目..." 
          class="w-full py-2 pl-8 pr-3 rounded-lg border border-gray-200/50 bg-white/90 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-all duration-200 text-sm text-gray-700 placeholder-gray-400"
          v-model="searchQuery"
          @input="handleSearch"
        >
        <svg class="absolute left-2.5 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
    </div>

    <!-- 分类区域（固定） -->
    <div class="p-3 border-b border-gray-200/50 bg-white/90 backdrop-blur-sm sticky top-[60px] z-10">
      <h2 class="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2 flex items-center">
        <svg class="w-3 h-3 mr-1.5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
        </svg>
        题目分类
      </h2>
      <ul class="space-y-1">
        <li>
          <a href="#" class="flex items-center px-2 py-1.5 text-xs font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-all duration-200">
            <svg class="w-3 h-3 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
            </svg>
            全部题目
            <span class="ml-auto bg-white/20 text-white text-xs px-1.5 py-0.5 rounded-full font-semibold">-</span>
          </a>
        </li>
        <li v-for="category in categories" :key="category.id">
          <a href="#" class="flex items-center px-2 py-1.5 text-xs font-medium rounded-lg text-gray-600 hover:bg-gray-100 transition-all duration-200">
            <i :class="`fa ${category.icon} w-3 text-center mr-2`"></i>
            {{ category.name }}
            <span class="ml-auto" :class="category.badgeClass">{{ category.count }}</span>
          </a>
        </li>
      </ul>
    </div>

    <!-- 题目列表（可滚动） -->
    <div class="p-3 pt-3">
      <h2 class="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2 flex items-center">
        <svg class="w-3 h-3 mr-1.5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
        </svg>
        题目列表
      </h2>
      
      <!-- 加载状态 -->
      <div v-if="loading" class="flex justify-center items-center py-8">
        <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="text-center py-8">
        <div class="text-red-500 text-sm mb-2">{{ error }}</div>
        <button @click="handleRetry" class="text-blue-500 hover:text-blue-600 text-sm">重试</button>
      </div>

      <!-- 题目列表 -->
      <div v-else-if="filteredQuestions.length > 0" class="space-y-1">
        <div 
          v-for="question in filteredQuestions" 
          :key="question.id"
          class="flex items-center p-2 rounded-lg transition-all duration-200 cursor-pointer"
          :class="question.id === currentQuestionId ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100'"
          @click="handleQuestionClick(question.id)"
        >
          <div class="flex items-center space-x-2 flex-1">
            <div class="w-6 h-6 bg-gray-100 rounded flex items-center justify-center text-xs font-semibold">
              {{ question.id }}
            </div>
            <div class="flex-1 min-w-0">
              <div class="text-sm font-medium truncate">{{ question.title }}</div>
              <div class="flex items-center space-x-2 text-xs text-gray-500">
                <span 
                  class="px-1.5 py-0.5 rounded text-xs"
                  :class="question.difficulty === 'Easy' ? 'bg-green-100 text-green-700' : 
                          question.difficulty === 'Medium' ? 'bg-yellow-100 text-yellow-700' : 
                          'bg-red-100 text-red-700'"
                >
                  {{ question.difficulty === 'Easy' ? '简单' : 
                     question.difficulty === 'Medium' ? '中等' : '困难' }}
                </span>
                <span>{{ Math.round((question.acceptance_rate || 0) * 100) }}%</span>
              </div>
            </div>
          </div>
          <div class="flex items-center space-x-1">
            <div v-if="question.user_status?.status === 'solved'" class="w-2 h-2 bg-green-500 rounded-full" title="已解决"></div>
            <div v-else-if="question.user_status?.status === 'attempted'" class="w-2 h-2 bg-yellow-500 rounded-full" title="已尝试"></div>
            <div v-else class="w-2 h-2 bg-gray-300 rounded-full" title="未尝试"></div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="text-center py-8">
        <div class="text-gray-400 text-sm">暂无题目</div>
      </div>
    </div>
  </aside>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { Question } from '@/types'

interface Props {
  expanded: boolean
  questions: Question[]
  currentQuestionId: number
  loading: boolean
  error: string
  categories: Array<{
    id: number
    name: string
    icon: string
    count: number
    badgeClass: string
  }>
}

const props = defineProps<Props>()

const emit = defineEmits<{
  search: [query: string]
  questionClick: [questionId: number]
  retry: []
}>()

const searchQuery = ref('')

const filteredQuestions = computed(() => {
  if (!searchQuery.value) return props.questions
  return props.questions.filter(q => 
    q.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    q.id.toString().includes(searchQuery.value)
  )
})

const handleSearch = () => {
  emit('search', searchQuery.value)
}

const handleQuestionClick = (questionId: number) => {
  emit('questionClick', questionId)
}

const handleRetry = () => {
  emit('retry')
}
</script>

<style scoped>
.sidebar-expanded {
  width: 320px;
  left: 0;
}

.sidebar-collapsed {
  width: 0;
  left: -320px;
}
</style>

